<template>
  <div class="app-container">
    <br>
    <h3 v-if="userInfo.userType == 10461002" class="title">职位切换</h3>
    <el-form v-if="userInfo.userType == 10461002" label-width="100px" class="setting-box">
      <el-form-item>
        <el-select v-model="poseSel" filterable default-first-option placeholder="请选择" @change="poseChg">
          <el-option
            v-for="pose in userInfo.positionList"
            :key="pose.POSITION_ID"
            :label="pose.POSITION_NAME"
            :value="pose.POSITION_ID"/>
        </el-select>

        <!--<el-radio-group v-model="poseSel" @change="poseChg">
          <el-radio v-for="pose in userInfo.positionList" :label="pose.POSITION_ID" :key="pose.POSITION_ID" border>{{ pose.POSITION_NAME }}</el-radio>
        </el-radio-group>-->
      </el-form-item>
    </el-form>
    <h3 class="title">重置密码</h3>
    <el-form ref="form" :model="form" :rules="rules" status-icon label-width="100px" class="setting-box">
      <el-form-item label="原密码" prop="oldPass">
        <el-input v-model="form.oldPass" type="password" auto-complete="off"/>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input v-model="form.pass" type="password" auto-complete="off"/>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input v-model="form.checkPass" type="password" auto-complete="off"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
        <el-button @click="resetForm('form')">重置</el-button>
      </el-form-item>
    </el-form>
    <h3 v-if="userInfo.userAccount == 'SA' || userInfo.userAccount == 'yonyou' " class="title">重置字典</h3>
    <el-form v-if="userInfo.userAccount == 'SA' || userInfo.userAccount == 'yonyou'" label-width="100px" class="setting-box">
      <el-form-item>
        <el-button @click="resetDict">刷新字典</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import {
  ispassWD
} from '@/utils/validate'
import {
  mapGetters
} from 'vuex'
import {
  supereditpassword,
  SendSmsForPasswordChange
} from '@/api/admin/auth/userInfo'
import { initUserData } from '@/api/login'
import dealerChg from './dealerChg'
import dealerChgYJY from './dealerChgYJY'

export default {
  name: 'Settings',
  components: { dealerChg, dealerChgYJY },
  data() {
    // 校验验证码
    const validateVerificationCode = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入验证码！'))
      } else {
        callback()
      }
    }
    // 校验新密码
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (!ispassWD(value)) {
        callback(new Error('密码必须包含数字、字母、字符至少两种,长度大于等于8位'))
      } else {
        if (this.form.checkPass !== '') {
          this.$refs.form.validateField('checkPass')
        }
        callback()
      }
    }
    // 校验第二次和第一次输入的密码是否一致
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      poseSel: '',
      content: '发送验证码', // 按钮里显示的内容
      totalTime: 60, // 记录具体倒计时时间
      btnStatus: false,
      form: {
        mobile: '',
        verificationCode: '',
        oldPass: '',
        pass: '',
        checkPass: ''
      },
      rules: {
        verificationCode: [{
          validator: validateVerificationCode,
          trigger: 'blur',
          required: true
        }],
        pass: [{
          validator: validatePass,
          trigger: 'blur',
          required: true
        }],
        checkPass: [{
          validator: validatePass2,
          trigger: 'blur',
          required: true
        }],
        oldPass: [{
          trigger: 'blur',
          required: true,
          message: '请输入原密码'
        }],
        mobile: [{
          trigger: 'blur',
          required: true,
          message: '请维护你的手机号'
        }]
      }
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  mounted() {
    debugger
    this.form.mobile = this.userInfo.mobile
    this.poseSel = this.userInfo.positionId
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.changePass()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.form.verificationCode = ''
      this.form.oldPass = ''
      this.form.pass = ''
      this.form.checkPass = ''
    },
    countDown() {
      let currentTime = this.totalTime
      this.clock = window.setInterval(() => {
        currentTime--
        this.content = currentTime + 's后重新发送'
        if (currentTime === 0) {
          console.log(this.clock)
          window.clearInterval(this.clock)
          this.btnStatus = false
          this.content = '发送验证码'
        }
      }, 1000)
    },
    sensValidation() { // 发送验证码
      this.$refs['form'].validateField('mobile', (mobileError) => {
        if (!mobileError) {
          this.countDown()
          this.btnStatus = true
          SendSmsForPasswordChange(this.form.mobile).then(res => {

          }).catch(err => {
            window.clearInterval(this.clock)
            this.content = '发送验证码'
            this.btnStatus = false
          })
        }
      })
    },
    changePass() {
      const param = {
        password: this.form.oldPass,
        newPassword: this.form.pass
      }
      supereditpassword(param).then(res => {
        this.$message({
          type: 'success',
          message: '修改成功!'
        })
        this.resetForm('form')
        this.form.mobile = this.userInfo.mobile
      }).catch(err => {})
    },
    resetDict() {
      this.$store.dispatch('RefreshDict').then(res => {
        this.$message.success('字典刷新成功。')
      }).catch(err => {
        // 拉去用户信息失败 返回登录页
        this.$message.error('刷新字典信息失败。')
      })
    },
    poseChg() {
      this.$store
        .dispatch('ChgPose', this.poseSel)
        .then(() => {
          initUserData({
            poseId: this.poseSel
          }).then((res) => {
            // this.$router.push({ path: '/' })
            location.reload()
          })
            .catch(() => {
              this.loading = false
            })
        })
    }
  }
}

</script>

<style scoped>
  .title {
    padding-left: 30px;
  }

  .setting-box {
    width: 500px;
  }

</style>
